文章總結

在這系列文章中，先介紹了 TypeScript 的相關內容。從 TypeScript 泛型應用，到 React Component 中的實用的寫法，還有 Zod 型別驗證的介紹和範例。

關於狀態管理，從 Client State 的基本概念，到 Redux Toolkit 和 Zustand 的深度解析。也介紹了 React Query 和 data-fetching 的方法與挑戰。

除此之外，也介紹了 CSR（Client-Side Rendering）、SSR（Server-Side Rendering）和 Streaming SSR 和 Suspense 等渲染模式。

接著介紹了 React 19 更新的 React Server Components 和 Server Functions ，以及 React 19 推出的新 API，還有還在測試階段的 React Compiler。

最後講解了 React 的內部運作機制，包括 React Fiber、Concurrent Rendering 和 Streaming SSR 等技術。

文章大綱

前言

• Day 1 前言

React 和 TypeScript

• Day 02 - 泛起來 ~ 讓泛型寫出更靈活的程式碼
• Day 03 - 更複雜的泛型，那些好用的關鍵字和 Utility Types
• Day 04 - 掌握 TypeScript Discriminated Unions：提升 React 組件的靈活性與安全性
• Day 05 - 掌握 ComponentProps：讓 React 元件型別更輕鬆
• Day 06 - TypeScript 語法技巧與 Zod 簡介
• Day 07 - 結合 Zod 與 React Hook Form 實現簡潔的表單管理
• Day 08 - 掌握 React 中的 Ref：useRef、Callback Ref 與 React 19 新特性介紹

Client State

• Day 09 - 掌握 Client State：React 狀態管理的核心概念
• Day 10 - Redux Toolkit 原理解析
• Day 11 - Zustand 原理解析

Server State & data-fetching

• Day 12 - 掌握 Server State：為何你需要 Server State 管理與 React Query 的簡介
• Day 13 - React Query 原理解析
• Day 14 - 三種 React 資料請求策略：從 fetch-on-render 到 render-as-you-fetch

渲染模式

• Day 15 - 掌握 Suspense：優化 React 的 SSR 體驗
• Day 16 - 選擇合適的渲染策略：CSR、SSR 和其他渲染方法

Server Components 和 Server Functions

• Day 17 - React Server Components 簡介
• Day 18 - 掌握 Server Functions、Client 和 Server Components 的互動技巧

React 19

• Day 19 - Server Functions、action prop 與新的 Hooks
• Day 20 - 使用 React 19 的 useOptimistic 和 Transitions 打造順暢體驗
• Day 21 - 掌握 React 19 use API，處理 Context 和非同步資料
• Day 22 - 掌握 React 19 Metadata 與資源載入優化

React Memoization

• Day 23 - 掌握 React Memoization : React.Memo 、useMemo 和 useCallback
• Day 24 - React Compiler 簡介
• Day 25 - React Compiler 原理解析

React 原理解析

• Day 26 - React Fiber 和 Concurrent 原理解析
• Day 27 - Streaming SSR 原理解析
• Day 28 - React Server Components 原理解析
• Day 29 - React Hooks 原理解析

完賽感言

很感謝當初自己在大學迷茫的時候開始學習寫程式，並在今年找到實習並開始前端工作，也感謝所有在這段路上幫助過我的人。這次鐵人賽選擇了比較進階的主題，對我來說算是比較大的挑戰，也感受到自己能力的不足。

這次的文章主題除了部分的實作內容，也有許多篇幅介紹概念和運作原理。在寫文章的過程中也發現 React Query 的寫法和之前寫的不一樣，另外還有 Server Action 突然改名成 Server Function。雖然實作方式和名稱會改變，但想要解決問題的概念是不變的。透過思考這個技術要解決什麼問題，可以更清楚自己所使用的技術。

希望這30天的內容對大家有幫助，感謝大家閱讀。